<div class="pure-view-container">
  <div class="x-view-title">${t('ui.security.permission.title.permissionManagement')}</div>
  <link href="${appCss('static/app/security/permission-management.css')}" rel="stylesheet" />
  <div class="x-search-bar">
    <form>
      <div class="form-row align-items-center">
        <div class="col-auto"><label class="sr-only" for="permissionCode"></label>
          <div class="input-group mb-2">
            <div class="input-group-prepend">
              <div class="input-group-text">${t('ui.security.permission.field.permissionCode')}</div>
            </div><input type="text" class="form-control" id="permissionCode" data-x-name="searchField.permissionCode"
              data-x-type="autoTrimText" />
          </div>
        </div>
        <div class="col-auto"><label class="sr-only" for="permissionName"></label>
          <div class="input-group mb-2">
            <div class="input-group-prepend">
              <div class="input-group-text">${t('ui.security.permission.field.permissionName')}</div>
            </div><input type="text" class="form-control" id="permissionName" data-x-name="searchField.permissionName"
              data-x-type="autoTrimText" />
          </div>
        </div>
        <div class="col-auto"><label class="sr-only" for="remark"></label>
          <div class="input-group mb-2">
            <div class="input-group-prepend">
              <div class="input-group-text">${t('ui.security.resource.field.remark')}</div>
            </div><input type="text" class="form-control" id="remark" data-x-name="searchField.remark"
              data-x-type="autoTrimText" />
          </div>
        </div>
        <div class="col-auto"><button type="button" class="btn btn-primary mb-2"
            data-x-ui="searchBtn">${t('ui.system.common.btn.search')}</button></div>
      </div>
    </form>
  </div>
  <div class="x-tool-bar"><button type="button" class="btn btn-outline-primary mb-2 btn-sm"
      data-x-ui="createBtn">${t('ui.system.common.btn.create')}</button></div>
  <table data-x-ui="permissionTable" class="x-table-custom">
    <thead>
      <tr>
        <th data-field="id" data-visible="false">ID</th>
        <th data-field="permissionCode">${t('ui.security.permission.field.permissionCode')}</th>
        <th data-field="permissionName">${t('ui.security.permission.field.permissionName')}</th>
        <th data-field="remark">${t('ui.system.common.field.remark')}</th>
        <th>${t('ui.system.common.field.operate')}</th>
      </tr>
    </thead>
  </table>
  <div data-x-ui="newPermissionDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">${t('ui.security.permission.dialog.newPermission')}</h5><button
            type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group x-form-required"><label
                for="permissionCode">${t('ui.security.permission.field.permissionCode')}</label><input
                type="text" class="form-control" id="permissionCode" name="permissionCode"
                data-x-name="new.permissionCode"
                placeholder="${t('ui.system.common.placeholder.inputCodeLimitLength', 1, 50)}" /></div>
            <div class="form-group x-form-required"><label
                for="permissionName">${t('ui.security.permission.field.permissionName')}</label><input
                type="text" class="form-control" id="permissionName" name="permissionName"
                data-x-name="new.permissionName"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 1, 20)}" /></div>
            <div class="form-group"><label for="remark">${t('ui.system.common.field.remark')}</label><input
                type="text" class="form-control" id="remark" name="remark" data-x-name="new.remark"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 0, 200)}" /></div>
          </form>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary x-btn-cancel"
            data-dismiss="modal">${t('ui.system.common.btn.cancel')}</button><button type="button"
            class="btn btn-primary x-btn-confirm">${t('ui.system.common.btn.save')}</button></div>
      </div>
    </div>
  </div>
  <div data-x-ui="editPermissionDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">${t('ui.security.permission.dialog.editPermission')}</h5><button
            type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
          <form><input type="hidden" id="id" name="id" data-x-name="edit.id" /><input type="hidden" id="versionNumber"
              name="versionNumber" data-x-name="edit.versionNumber" />
            <div class="form-group x-form-required"><label
                for="permissionCode">${t('ui.security.permission.field.permissionCode')}</label><input
                type="text" class="form-control" id="permissionCode" name="permissionCode"
                data-x-name="edit.permissionCode"
                placeholder="${t('ui.system.common.placeholder.inputCodeLimitLength', 1, 50)}" /></div>
            <div class="form-group x-form-required"><label
                for="permissionName">${t('ui.security.permission.field.permissionName')}</label><input
                type="text" class="form-control" id="permissionName" name="permissionName"
                data-x-name="edit.permissionName"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 1, 20)}" /></div>
            <div class="form-group"><label for="remark">${t('ui.system.common.field.remark')}</label><input
                type="text" class="form-control" id="remark" name="remark" data-x-name="edit.remark"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 0, 200)}" /></div>
          </form>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary x-btn-cancel"
            data-dismiss="modal">${t('ui.system.common.btn.cancel')}</button><button type="button"
            class="btn btn-primary x-btn-confirm">${t('ui.system.common.btn.save')}</button></div>
      </div>
    </div>
  </div>
  <div data-x-ui="assignResourceDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">${t('ui.security.permission.dialog.assignResource')}</h5><button
            type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
          <form>
            <nav>
              <div class="nav nav-tabs" role="tablist"><button data-x-ui="assignedResourceNavTab"
                  class="nav-link active" type="button" role="tab"
                  data-toggle="tab">${t('ui.security.assignResourceDialog.tab.assignedResource')}</button><button
                  data-x-ui="assignableResourceNavTab" class="nav-link" type="button" role="tab" data-toggle="tab"
                  disabled="">${t('ui.security.assignResourceDialog.tab.assignableResource')}</button></div>
            </nav>
            <div class="tab-content">
              <div data-x-ui="assignedResourceTabPane" class="tab-pane fade show active" role="tabpanel">
                <table data-x-ui="assignedResourceTable" class="x-table-custom" data-x-name="assignedResources"
                  data-x-type="dataGrid">
                  <thead>
                    <tr>
                      <th data-field="id" data-visible="false">ID</th>
                      <th data-field="resourceTypeDesc">${t('ui.security.resource.field.resourceType')}</th>
                      <th data-field="resourcePath">${t('ui.security.resource.field.resourcePath')}</th>
                      <th data-field="accessMethod">${t('ui.security.resource.field.accessMethod')}</th>
                      <th data-field="accessPolicyDesc">${t('ui.security.resource.field.accessPolicy')}</th>
                      <th data-field="frozenFlagDesc">${t('ui.security.resource.field.frozenFlag')}</th>
                      <th data-field="remark">${t('ui.security.resource.field.remark')}</th>
                      <th>${t('ui.system.common.field.operate')}</th>
                    </tr>
                  </thead>
                </table>
              </div>
              <div data-x-ui="assignableResourceTabPane" class="tab-pane fade" role="tabpanel">
                <div class="x-search-bar">
                  <form>
                    <div class="form-row align-items-center">
                      <div class="col-auto"><label class="sr-only" for="resourcePath"></label>
                        <div class="input-group mb-2">
                          <div class="input-group-prepend">
                            <div class="input-group-text">${t('ui.security.resource.field.resourcePath')}
                            </div>
                          </div><input type="text" class="form-control" id="resourcePath"
                            data-x-name="searchResourceField.resourcePath" data-x-type="autoTrimText" />
                        </div>
                      </div>
                      <div class="col-auto"><label class="sr-only" for="remark"></label>
                        <div class="input-group mb-2">
                          <div class="input-group-prepend">
                            <div class="input-group-text">${t('ui.security.resource.field.remark')}</div>
                          </div><input type="text" class="form-control" id="remark"
                            data-x-name="searchResourceField.remark" data-x-type="autoTrimText" />
                        </div>
                      </div>
                      <div class="col-auto"><button type="button" class="btn btn-primary mb-2"
                          data-x-ui="searchResourceBtn">${t('ui.system.common.btn.search')}</button></div>
                    </div>
                  </form>
                </div>
                <table data-x-ui="assignableResourceTable" class="x-table-custom">
                  <thead>
                    <tr>
                      <th data-checkbox="true"></th>
                      <th data-field="id" data-visible="false">ID</th>
                      <th data-field="resourceTypeDesc">${t('ui.security.resource.field.resourceType')}</th>
                      <th data-field="resourcePath">${t('ui.security.resource.field.resourcePath')}</th>
                      <th data-field="accessMethod">${t('ui.security.resource.field.accessMethod')}</th>
                      <th data-field="accessPolicyDesc">${t('ui.security.resource.field.accessPolicy')}</th>
                      <th data-field="frozenFlagDesc">${t('ui.security.resource.field.frozenFlag')}</th>
                      <th data-field="remark">${t('ui.security.resource.field.remark')}</th>
                      <th>${t('ui.system.common.field.operate')}</th>
                    </tr>
                  </thead>
                </table>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary x-btn-cancel"
            data-dismiss="modal">${t('ui.system.common.btn.cancel')}</button><button type="button"
            class="btn btn-primary x-btn-confirm">${t('ui.system.common.btn.save')}</button></div>
      </div>
    </div>
  </div>
  <script src="${appJs('app/common/js/table-selection-tabs.js')}" type="text/javascript"></script>
  <script src="${appJs('app/security/permission/permission-management.js')}" type="text/javascript"></script>
  <script src="${appJs('app/security/permission/assign-resource-dialog.js')}" type="text/javascript"></script>
</div>